<template>
    <pro-card
      v-loading="isFetching"
      shadow="never"
    >
      <pro-crud
        v-model="form"
        v-model:search="query"
        v-model:current-page="page"
        v-model:page-size="limit"
        :columns="columns"
        :menu="menu"
        :data="list"
        :detail="form"
        :total="total"
        :rules="rules"
        :before-open="beforeOpen"
        border
        stripe
        label-width="100px"
        layout="total, ->, jumper, prev, pager, next, sizes"
        @search="search"
        @submit="submit"
        @delete="deleteRow"
        @load="loadList"
        @search-reset="loadList"
      >
        <template #table-tag="{ row, size }">
          <el-tag
            v-for="(item, index) in row.tag"
            :key="index"
            :size="size"
            class="tag-item"
          >
            {{ item }}
          </el-tag>
        </template>
        <template #detail-tag="{ item, size }">
          <el-tag
            v-for="(v, i) in item.tag"
            :key="i"
            :size="size"
            class="tag-item"
          >
            {{ v }}
          </el-tag>
        </template>
      </pro-crud>
    </pro-card>
  </template>
  
  <script setup lang="ts">
  import type { ArticleItem, ArticleForm, ArticleQuery } from '../../types/index'
  
  const {
    query,
    form,
    isFetching,
    page,
    limit,
    total,
    list,
    beforeOpen,
    search,
    loadList,
    submit,
    deleteRow,
  } = useCrud<ArticleItem, ArticleForm, ArticleQuery>({ url: Api.article })
  
  const menu = defineCrudMenuColumns({ label: '操作' })
  const columns = defineCrudColumns<ArticleItem>([
    {
      label: 'ID',
      prop: 'id',
    },
    {
      label: '标题',
      prop: 'title',
      component: markRaw(ElInput),
      search: true,
      form: true,
      detail: true,
      props: defineComponentProps<typeof ElInput>({
        clearable: true,
        placeholder: '请输入标题',
      }),
    },
    {
      label: '作者',
      prop: 'author',
      component: markRaw(ElInput),
      search: true,
      form: true,
      detail: true,
      props: defineComponentProps<typeof ElInput>({
        clearable: true,
        placeholder: '请输入作者',
      }),
    },
    {
      label: '标签',
      prop: 'tag',
      component: ProInputTag,
      form: true,
      detail: true,
      props: defineComponentProps<typeof ProInputTag>({
        clearable: true,
        trigger: 'enter',
        placeholder: '请输入标签',
      }),
    },
    {
      label: '内容',
      prop: 'content',
      component: markRaw(RichEditor),
      form: true,
      detail: true,
      hide: true,
    },
    {
      label: '创建时间',
      prop: 'createTime',
    },
  ])
  const rules = {
    title: { required: true, message: '请输入标题', trigger: 'blur' },
    author: { required: true, message: '请输入作者', trigger: 'blur' },
    tag: { required: true, message: '请输入标签', trigger: 'blur' },
    content: { required: true, message: '请输入内容', trigger: 'blur' },
  }
  </script>
  
  <style scoped>
  .tag-item:nth-child(n + 2) {
    margin-left: 6px;
  }
  </style>
  